<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>山西煤炭现货公路交易系统客户端</title>
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.min.css">
     <!-- daterange picker -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/ionicons/css/ionicons.min.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
     <!-- DataTables -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
	<!-- jQuery 2.1.4 -->
    <script src="<s:url value="/resources"/>/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
    <script src="<s:url value="/resources"/>/adminlte/bootstrap/js/bootstrap.min.js"></script>
	 <!-- AdminLTE App -->
    <script src="<s:url value="/resources"/>/adminlte/dist/js/app.min.js"></script>
    <!-- Select2 -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/select2/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
    <!-- date-range-picker -->
    <script src="<s:url value="/resources"/>/adminlte/moment.min.js"></script>
    <script src="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- DataTables -->
    <script src="<s:url value="/resources"/>/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>
     <!-- Select2 -->
    <script src="<s:url value="/resources"/>/adminlte/plugins/select2/select2.full.min.js"></script>
    <script src="<s:url value="/resources"/>/adminlte/plugins/select2/i18n/zh-CN.js"></script>
    <!-- 引入 echarts.js -->
    <script src="<s:url value="/resources"/>/echarts/echarts.min.js"></script>
    <script src="<s:url value="/resources"/>/echarts/map/js/china.js"></script>
     <script src="<s:url value="/resources"/>/echarts/myechart/areaChart.js"></script>
      <script src="<s:url value="/resources"/>/echarts/myechart/distributionChart.js"></script>
      <script src="<s:url value="/resources"/>/adminlte/My97DatePicker/WdatePicker.js"></script>
     <script src="<s:url value="/resources"/>/adminlte/default.js"></script>
      <script src="<s:url value="/resources"/>/adminlte/default_settlement.js"></script>
     <script type="text/javascript">
 $(function(){  
   // loadUserInfo();
    dataTab("dataTab",true,false,false,true,true,false,"<s:url value="/resources"/>/adminlte/dataTabBootstrapCN.json");
     
    loadMenu("${user.roleType}","${menuid}",${menuList});
      //areaChart();
      getSelOptsForSettle("<s:url value="/"/>/callCenterService/getSelOpts","selShenfmchs","shenfmchs","regandsign_shenfmchs");
      getSelOptsForSettle("<s:url value="/"/>/callCenterService/getSelOpts","selJiaoyfws","jiaoyfws","regandsign_jiaoyfws");
      getSelOptsForSettle("<s:url value="/"/>/callCenterService/getSelOpts","selMaimlxs","maimlxs","regandsign_maimlxs");
      getSelOptsForSettle("<s:url value="/"/>/callCenterService/getSelOpts","selHangylxs","hangylxs","regandsign_hangylxs");
      
      distributionforsign("distributionChart",${distribution});
      areaChart1(${pielist1},"按省分布","${oldDate}","chartForMust");
      areaChart1(${pielist2},"按行业分布","${oldDate}","chartForHangy");
      areaChart1(${pielist3},"按交易商类型","${oldDate}","chartForTraderType");
      areaChart1(${pielist4},"按运输方式","${oldDate}","chartForTransType");
      $(".select2").select2();
 });
 function validatePage(){
	 var date1 = document.getElementById("startDate").value;
	 var date2 = document.getElementById("endDate").value;
	 
	 if(date1 == ""){
		 document.getElementById("startDate").style.backgroundColor = "red";
		 alert("请填写查询开始年月！");
		 document.getElementById("startDate").focus();
        return;
    }
	 if(date2 == ""){
		 document.getElementById("endDate").style.backgroundColor = "red";
		 alert("请填写查询截止年月！");
		 document.getElementById("endDate").focus();
        return;
    }
	 document.getElementById("startDate").style.backgroundColor = "";
    document.getElementById("endDate").style.backgroundColor = "";
    if(date1 != "" && date2 != ""){
   	 var a1 = date1.split("/");       
		 var b1 = date2.split("/");  
		 var d1 = new Date(a1[0],a1[1]);       
		 var d2 = new Date(b1[0],b1[1]);    
		 if (Date.parse(d1) - Date.parse(d2) > 0) {//a>b          
				alert("请输入正确的年月范围！");
				return;
		 }
	 }
 	/* if($("#odwdms").val()==''
 		&&$("#idwdms").val()==''
 		&&$("#oshenfs")[0].selectedIndex==-1
 		&&$("#ohangys")[0].selectedIndex==-1
 		&&$("#ishenfs")[0].selectedIndex==-1
 		&&$("#ihangys")[0].selectedIndex==-1){
 		alert("对不起，请选择至少一项除时间外的查询条件");
 		return false;
 	};
 	 */
 	
 	form1.submit();
 }
     </script>
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
<%@ include file="../../header.jsp" %>
<%@ include file="../../sidebar.jsp" %>
<div class="content-wrapper" >
        <div class="content-header">
          <h1>客服分析<small>交易商注册及银行签约情况表（含公路用户）</small></h1>
          <ol class="breadcrumb">
            <li><a href="<s:url value="/"/>/index.jsp"><i class="fa fa-dashboard"></i>首页</a></li>
            <li><a href="#" id="location1"></a></li>
            <li class="active" id="location2"></li>
          </ol>
        </div>

        <!-- Main content -->
        <div class="content">
         <!-- 查询条件 -->
         <form action="<s:url value="/"/>/callCenterService/getRegisterAndSignInfo" method="post" name="form1" id='form1'>
         <input type="hidden" value="${type}" name="type"/>
         <input type="hidden" value='${selShenfmchs}' name="selShenfmchs" id ="selShenfmchs"/>
         <input type="hidden" value='${selJiaoyfws}' name="selJiaoyfws" id ="selJiaoyfws"/>
         <input type="hidden" value='${selMaimlxs}' name="selMaimlxs" id ="selMaimlxs"/>
         <input type="hidden" value='${selHangylxs}' name="selHangylxs" id ="selHangylxs"/>
          <div class="box box-success">
            <div class="box-header with-border">
              <h3 class="box-title">查询条件</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <!-- <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button> -->
              </div>
            </div><!-- /.box-header -->
            <div class="box-body">
              <div class="row">
              	 <div class="col-md-6">
                 <!-- Date range -->
                 <div class="form-group">
                    <label>查询年月（时间段）</label>
                    <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </div>
                      <input type="text" style="width:35%;padding-left: 17px;height: 32px;border: 1px solid #d2d6de;"  class="" id="startDate" name="startDate" value="${startDate}" onfocus="WdatePicker({dateFmt:'yyyy/MM'})">
                      &nbsp;&nbsp;--&nbsp;&nbsp;<input type="text" style="width:35%;;padding-left: 27px;height: 32px;border: 1px solid #d2d6de;" class="" id="endDate" name="endDate" value="${endDate}" onfocus="WdatePicker({dateFmt:'yyyy/MM'})">
                    &nbsp;&nbsp;&nbsp;
                    </div><!-- /.input group -->
                    </div>
                  
               </div>
              	<div class="col-md-6">
                  <div class="form-group">
                    <label>地区</label>
                    <select id="shenfmchs" name="shenfmchs" class="form-control select2" multiple="multiple" data-placeholder="请选择地区" style="width: 100%;">
                    </select>
                  </div><!-- /.form-group -->
                </div><!-- /.col -->
              </div><!-- /.row -->
              <div class="row">
              	 <div class="col-md-6">
                 <!-- Date range -->
                 <div class="form-group">
                    <label>交易商类型</label>
                    <select id="maimlxs" name="maimlxs" class="form-control select2" multiple="multiple" data-placeholder="请选择交易商类型" style="width: 100%;">
                    </select>
                    </div>
               </div>
              	<div class="col-md-6">
                  <div class="form-group">
                    <label>交易运输方式</label>
                    <select id="jiaoyfws" name="jiaoyfws" class="form-control select2" multiple="multiple" data-placeholder="请选择交易运输方式" style="width: 100%;">
                    </select>
                  </div><!-- /.form-group -->
                </div><!-- /.col -->
              </div><!-- /.row -->
              <div class="row">
              	 <div class="col-md-6">
                 <!-- Date range -->
                 <div class="form-group">
                    <label>交易商行业</label>
                    <select id="hangylxs" name="hangylxs" class="form-control select2" multiple="multiple" data-placeholder="请选择交易商行业" style="width: 100%;">
                    </select>
                    </div>
               </div>
              	<div class="col-md-6">
                  <div class="form-group">
                  	 <label>&nbsp;</label>
                  	 <div class="input-group">
                      <button class="btn btn-primary"  type="button" onclick="validatePage()">查询</button>
                      </div>
                  </div>
                </div><!-- /.col -->
              </div><!-- /.row -->
            </div><!-- /.box-body -->
          </div><!-- /.box -->
          </form>
          
          <div class="box">
                <div class="box-header">
                  <h3 class="box-title">交易商注册及银行签约情况表（含公路用户）
                  </h3>
                  <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <!-- <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button> -->
              </div>
                </div><!-- /.box-header -->
                
                <div class="box-body">
                  <table id="dataTab" class="table table-bordered table-hover">
                    <thead>
                    	<tr>
                    		<th>序号</th>
                    		<th>所属地区</th>
                    		<th>企业累计</th>
                    	  <c:set var="j" value="1"></c:set>
                    	<c:forEach items="${resultlist}" var="show">
                    	 <c:if test="${j eq 1}">
                    		<c:if test="${show.生产企业 ne null }"><th>生产企业</th></c:if>
                    		<c:if test="${show.生产企业 ne null }"><th>消费企业</th></c:if>
                    		<c:if test="${show.经营企业 ne null }"><th>经营企业</th></c:if>
                    		<c:if test="${show.公路交易商 ne null }"><th>公路交易商</th></c:if>
                    		<c:if test="${show.铁路交易商 ne null }"><th>铁路交易商</th></c:if>
                    		<c:if test="${show.公铁路交易商 ne null }"><th>公铁路交易商</th></c:if>
                    		<c:if test="${show.已签约数 ne null }"><th>已签约数</th></c:if>
                    		<c:if test="${show.未签约数 ne null }"><th>未签约数</th></c:if>
                    		<c:if test="${show.已绑定数 ne null }"><th>已绑定数</th></c:if>
                    		<c:if test="${show.未绑定数 ne null }"><th>未绑定数</th></c:if>
                    		<c:if test="${show.电力行业 ne null }"><th>电力行业</th></c:if>
                    		<c:if test="${show.冶金行业 ne null }"><th>冶金行业</th></c:if>
                    		<c:if test="${show.化工行业 ne null }"><th>化工行业</th></c:if>
                    		<c:if test="${show.运输行业 ne null }"><th>运输行业</th></c:if>
                    		<c:if test="${show.生活行业 ne null }"><th>生活行业</th></c:if>
                    		<c:if test="${show.煤炭行业 ne null }"><th>煤炭行业</th></c:if>
                    		<c:if test="${show.建材行业 ne null }"><th>建材行业</th></c:if>
                    		<c:if test="${show.其它行业 ne null }"><th>其它行业</th></c:if>
                    		</c:if>
                    		<c:set var="j" value="${j+1}"></c:set>
                    	</c:forEach>
                    	</tr>
                    </thead>
                    <tbody>
                    	<c:set var="i" value="1"></c:set>
                    	<c:forEach items="${resultlist}" var="info">
                    			 <c:set var="x" value="1"></c:set>
                    			<c:forEach items="${resultlist}" var="show">
                    			 <c:if test="${x eq 1}">
                    		<tr>
                    			<td>${i}</td>
                    			<td><c:if test="${info.所属地区  ne null}">${info.所属地区}</c:if>
                    			<c:if test="${info.所属地区  eq null}">合计</c:if>
                    			</td>
                    			<td>${info.企业累计}</td>
                    			<c:if test="${show.生产企业 ne null }"><td>${info.生产企业}</td></c:if>
                    			<c:if test="${show.生产企业 ne null }"><td>${info.消费企业}</td></c:if>
                    			<c:if test="${show.经营企业 ne null }"><td>${info.经营企业}</td></c:if>
                    			<c:if test="${show.公路交易商 ne null }"><td>${info.公路交易商}</td></c:if>
                    			<c:if test="${show.铁路交易商 ne null }"><td>${info.铁路交易商}</td></c:if>
                    			<c:if test="${show.公铁路交易商 ne null }"><td>${info.公铁路交易商}</td></c:if>
                    			<c:if test="${show.已签约数 ne null }"><td>${info.已签约数}</td></c:if>
                    			<c:if test="${show.未签约数 ne null }"><td>${info.未签约数}</td></c:if>
                    			<c:if test="${show.已绑定数 ne null }"><td>${info.已绑定数}</td></c:if>
                    			<c:if test="${show.未绑定数 ne null }"><td>${info.未绑定数}</td></c:if>
                    			<c:if test="${show.电力行业 ne null }"><td>${info.电力行业}</td></c:if>
                    			<c:if test="${show.冶金行业 ne null }"><td>${info.冶金行业}</td></c:if>
                    			<c:if test="${show.化工行业 ne null }"><td>${info.化工行业}</td></c:if>
                    			<c:if test="${show.运输行业 ne null }"><td>${info.运输行业}</td></c:if>
                    			<c:if test="${show.生活行业 ne null }"><td>${info.生活行业}</td></c:if>
                    			<c:if test="${show.煤炭行业 ne null }"><td>${info.煤炭行业}</td></c:if>
                    			<c:if test="${show.建材行业 ne null }"><td>${info.建材行业}</td></c:if>
                    			<c:if test="${show.其它行业 ne null }"><td>${info.其它行业}</td></c:if>
                    		</tr>
                    		</c:if>
                    		<c:set var="x" value="${x+1}"></c:set>
                    	</c:forEach>
                    		<c:set var="i" value="${i+1}"></c:set>
                    	</c:forEach>
                    </tbody>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
          
          <!-- 数据图 start-->
        <div class="row">
            <div class="col-md-12">
              <!-- AREA CHART -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">交易商注册及银行签约情况分布图<c:if test="${oldDate ne null }">（${oldDate}）</c:if></h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <div id="distributionChart" style="height:600px;"></div>
                  </div>
                  
                </div><!-- /.box-body -->
              </div><!-- /.box -->

              <!-- DONUT CHART -->

            </div><!-- /.col (LEFT) -->
          </div><!-- /.row -->
        <!-- 数据图 start-->
        <div class="row">
            <div class="col-md-6">
              <!-- AREA CHART -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">
                  	按省分布
                   	</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <div id="chartForMust" style="width:100%;height:250px;"></div>
                  </div>
                  
                </div><!-- /.box-body -->
              </div><!-- /.box -->

              <!-- DONUT CHART -->

            </div><!-- /.col (LEFT) -->
            <div class="col-md-6">
              <!-- LINE CHART -->
              <div class="box box-info">
                <div class="box-header with-border">
                  <h3 class="box-title">
                  	按行业分布
                  </h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                     <div id="chartForHangy" style="width:100%;height:250px;"></div>
                  </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
              
              </div>
              </div>
              <div class="row">
              <div class="col-md-6">
              <!-- AREA CHART -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">
                  	按交易商类型
                   	</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <div id="chartForTraderType" style="width:100%;height:250px;"></div>
                  </div>
                  
                </div><!-- /.box-body -->
              </div><!-- /.box -->
				</div>

            <div class="col-md-6">
              <!-- AREA CHART -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">
                  	按运输方式
                   	</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <div id="chartForTransType" style="width:100%;height:250px;"></div>
                  </div>
                  
                </div><!-- /.box-body -->
              </div><!-- /.box -->

            </div><!-- /.col (LEFT) -->
          </div><!-- /.row -->
        <!-- 数据图 end -->

        </div><!-- /.content -->
      </div><!-- /.content-wrapper -->
</div>  
</body>
</html>
